<template>
	<BasicDrawer v-model:show="showModal" :title="menuTitle" :width="'80%'">
		<n-form ref="formRef" :label-width="80" :model="form" :rules="rules" size="medium">
			<n-form-item label="菜单名称" path="menu_name">
				<n-input v-model:value="form.menu_name" placeholder="输入菜单名称" />
			</n-form-item>
			<n-form-item label="菜单标识" path="component_name">
				<n-input v-model:value="form.component_name" placeholder="输入菜单标识" />
			</n-form-item>
			<n-form-item label="菜单图标" path="icon">
				<n-input v-model:value="form.icon" placeholder="请选择菜单图标" />
			</n-form-item>
			<n-form-item label="重定向路径" path="redirect_path">
				<n-input v-model:value="form.redirect_path" placeholder="请输入重定向路径" />
			</n-form-item>
			<n-form-item label="菜单路径" path="menu_path">
				<n-input v-model:value="form.menu_path" placeholder="请输入菜单路径" />
			</n-form-item>
			<n-form-item label="菜单组件映射" path="component">
				<n-select v-model:value="form.component" placeholder="请选择菜单组件映射" :options="menuComponentOptions" />
			</n-form-item>
			<n-form-item label="页面菜单组件映射" path="second_component">
				<n-input v-model:value="form.second_component" placeholder="请输入页面菜单组件映射" />
			</n-form-item>
			<n-form-item label="权限字符串" path="permissions" :rule="{
				required: [2,4].includes(form.menu_type),
				trigger: ['blur','input'],
				message: '请输入权限字符串'
			}">
				<n-input v-model:value="form.permissions" placeholder="请输入权限字符串" />
			</n-form-item>
			<n-form-item label="排序" path="sort">
				<n-input-number v-model:value="form.sort" class="wp-100" :show-button="false" clearable
					placeholder="请输入排序" />
			</n-form-item>
			<n-form-item label="父级id" path="pid">
				<n-input v-model:value="form.pid" disabled placeholder="请输入父级id" />
			</n-form-item>
			<n-form-item label="层级id" path="id_path">
				<n-input v-model:value="form.id_path" disabled placeholder="请输入层级id" />
			</n-form-item>
			<n-form-item label="菜单类型" path="menu_type">
				<n-select v-model:value="form.menu_type" placeholder="请选择菜单类型" :options="menuTypeOptions" />
			</n-form-item>
			<n-form-item label="是否为同级菜单" path="child_menu_show">
				<n-radio-group v-model:value="form.child_menu_show" :disabled="[2,4].includes(form.menu_type)"
					name="child_menu_show">
					<n-space>
						<n-radio :value="1">
							是
						</n-radio>
						<n-radio :value="0">
							否
						</n-radio>
					</n-space>
				</n-radio-group>
			</n-form-item>
		</n-form>
		<template v-slot:footer>
			<n-button @click="handleCancel">取消</n-button>
			<n-button class="ml-10" @click="handleConfirm" :loading="btnLoading" type="primary">确定</n-button>
		</template>
	</BasicDrawer>
</template>

<script setup lang="ts">
	import { unref, ref, reactive, defineExpose } from 'vue'
	import { useMessage, NButton, NSpace, FormInst } from 'naive-ui'
	import { BasicDrawer } from "@/components/Common/BasicDrawer"
	import _ from "lodash-es"
	import { menuTypeOptions, menuComponentOptions } from "@/utils/constant"
	import { RowData } from 'naive-ui/es/data-table/src/interface'
	import { addOrUpdMenu } from "@/api/system"
	const message = useMessage()
	const emits = defineEmits([
		"refresh"
	])
	const showModal = ref(false)
	const roleId = ref<string>()
	const formRef = ref<FormInst | null>(null)
	const formData = () => ({
		menu_name: null,
		component_name: null,
		icon: null,
		redirect_path: null,
		menu_path: null,
		component: null,
		second_component: null,
		permissions: null,
		sort: 0,
		pid: '0',
		id_path: null,
		menu_type: null,
		child_menu_show: 0
	})
	let form = reactive(formData())
	const rules = {
		menu_name: {
			required: true,
			trigger: ['blur', 'input'],
			message: '请输入菜单名称'
		},
		menu_type: {
			required: true,
			type: 'number',
			trigger: 'change',
			message: '请输入菜单类型'
		},
		child_menu_show: {
			required: true,
			type: 'number',
			trigger: 'change',
			message: '请选择是否为同级菜单'
		}
	}
	const menuTitle = ref<String>("菜单新增")
	/**
	 * @param {Object} row
	 * 打开弹窗
	 */
	function open(row : RowData, flag) {
		showModal.value = true
		if (!flag) {
			menuTitle.value = '菜单编辑'
			roleId.value = row.id
			Object.assign(unref(form), row)
		} else {
			form = Object.assign(unref(form), formData())
			formRef.value?.restoreValidation()
			if (row) {
				form.pid = row.id
				form.id = ''
				if (row.pid === '0') {
					form.id_path = row.pid + "," + row.id
				} else {
					form.id_path = row.id_path + "," + row.id
				}
			}
			menuTitle.value = '菜单新增'
		}
	}
	function handleCancel() {
		showModal.value = false
	}
	/**
	 * 保存
	 */
	const btnLoading = ref<Boolean>(false)
	function handleConfirm(e : MouseEvent) {
		e.preventDefault()
		formRef.value?.validate((errors) => {
			if (!errors) {
				btnLoading.value = true
				addOrUpdMenu(form).then(res => {
					message.success('保存成功')
					btnLoading.value = false
					showModal.value = false
					emits('refresh')
				})
			} else {
				message.error('验证失败')
			}
		})

	}

	defineExpose({
		open
	})
</script>

<style>
</style>